/*
* @author David Alexa <alexa.david@me.com>
*
* Copyright (C) 2012-2015 CESNET
*
* LICENSE TERMS
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
* are met:
* 1. Redistributions of source code must retain the above copyright
*    notice, this list of conditions and the following disclaimer.
* 2. Redistributions in binary form must reproduce the above copyright
*    notice, this list of conditions and the following disclaimer in
*    the documentation and/or other materials provided with the
*    distribution.
* 3. Neither the name of the Company nor the names of its contributors
*    may be used to endorse or promote products derived from this
*    software without specific prior written permission.
*
* ALTERNATIVELY, provided that this notice is retained in full, this
* product may be distributed under the terms of the GNU General Public
* License (GPL) version 2 or later, in which case the provisions
* of the GPL apply INSTEAD OF those given above.
*
* This software is provided ``as is'', and any express or implied
* warranties, including, but not limited to, the implied warranties of
* merchantability and fitness for a particular purpose are disclaimed.
* In no event shall the company or contributors be liable for any
* direct, indirect, incidental, special, exemplary, or consequential
* damages (including, but not limited to, procurement of substitute
* goods or services; loss of use, data, or profits; or business
* interruption) however caused and on any theory of liability, whether
* in contract, strict liability, or tort (including negligence or
* otherwise) arising in any way out of the use of this software, even
* if advised of the possibility of such damage.
*/

@import "compass/reset";
@import "compass/css3";
@import "compass/typography/links/link-colors";
@import "compass/typography/text/ellipsis";
@import "compass/utilities/general";

// global variables
@import "variables";

html { min-height: 100%; height: 100%; width: 100%; min-width: 800px; }
body { background: $background-color; font-family: $font-body; font-size: 0.625em; color: $text-color; position: relative; min-height: 100%; height: 100%; overflow: hidden;
	> * { @include box-sizing(border-box); }
}
a { @include link-colors($link-color, $link-color-hover);
	&:hover { text-decoration: none; }
}
strong, b { font-weight: bold; }
.left { float: left; }
.right { float: right; }
.display-none { display: none; }
hr.cleaner { width: 100%; height: 0px; margin: 0px; border: 0px none; color: transparent; background: transparent; visibility: hidden; clear: both; }
.red { color: $color-danger !important; }
.green { color: $color-success !important; }

.cover-wo-alerts { position: relative; height: 100%; min-height: 100%; width: 100%; }

.button { background-color: $button-primary-background; @include border-radius($border-radius-base); padding: 8px 20px; color: #fff; @include text-shadow(1px, 1px, 2px, #333); font-size: 1em; font-weight: normal; border: 1px solid darken($button-primary-background, 5%); cursor: pointer; margin: 15px 0px; position: relative; z-index: 1; text-decoration: none; text-align: left; white-space: normal; line-height: 1.3em; font-family: $font-buttons;
	&:active { @include single-box-shadow(0px, 2px, 5px, 0px, rgba(255,255,255,0.25), true);  }
	&:disabled { cursor: not-allowed; }
	&:hover:not(:disabled) { background-color: darken($button-primary-background, 14%); border-color: darken($button-primary-background, 20%); }
	&.red { background-color: $button-danger-background; border: 1px solid darken($button-danger-background, 5%); color: #fff;
		&:hover:not(:disabled) { background-color: darken($button-danger-background, 15%); border-color: darken($button-danger-background, 20%); }
	}
	&.button-green { background-color: $button-success-background; border: 1px solid darken($button-success-background, 5%); color: #fff;
		&:hover:not(:disabled) { background-color: darken($button-success-background, 15%); border-color: darken($button-success-background, 20%); }
	}
	&.grey { background-color: $button-secondary-background; border: 1px solid darken($button-secondary-background, 5%); color: #fff;
		&:hover:not(:disabled) { background-color: darken($button-secondary-background, 15%); border-color: darken($button-secondary-background, 15%); }
	}
	&.small { padding: 4px 6px; font-size: 0.9em; }
	i.fa { padding-left: 0.4em; padding-right: 0.4em; }
}
.button-link { cursor: pointer; @include inline-block; @include link-colors($link-color, $link-color-hover);
	&.red { color: $color-danger; }
	&.close { margin-top: 25px; }
}
.bubble { background: #ddd; @include inline-block; padding: 6px 10px; @include border-radius($border-radius-base); }

#ajax-spinner { position: absolute; width: 100%; height: 100%; @include background( url($img + 'ajax-loader.gif'), rgba(0,0,0,0.5) ); background-repeat: no-repeat; background-position: center center; top: 0; left: 0; z-index: 30; }

/* navigation */
nav#block--topMenu, div#block--topMenu { background: $nav-top-background; height: $nav-top-height; line-height: $nav-top-height; color: $nav-top-color; border-bottom: $nav-top-bottom-border; @include box-shadow( 0px 0px 7px rgba(0,0,0,0.9)); position: absolute; z-index: 100; top: 0px; width: 100%;
	> a { color: $nav-top-link-color; background: $nav-top-link-background; text-decoration: none; @include text-shadow(1px 1px 2px #000); padding: 0px 20px; border-left: 1px solid $color-primary; float: left; font-size: 1.3em; position: relative;
		&:first-child + a { border-left: 1px solid #000; }
		&:hover, &.active { background: $nav-top-link-hover-background; color: $nav-top-link-color-hover; }
		&.nth-0 { border-left: 1px solid desaturate($color-primary-light, 50%); }
		&.active {
			span.arrow { position: absolute; bottom: -8px; left: 50%; margin-left: -8px; width: 0px; height: 0px; display: block; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid darken($nav-top-background, 20%); }
		}
	}

	//.ico-lock, .ico-unlock, .ico-session, .ico-refresh
	.header-icon { background: $nav-top-icon-background-color; padding: 0px 4px; border-left: 1px solid lighten($nav-top-icon-background-color, 10%);
		span { display: block; padding: 0px;  float: left; width: 40px; height: 39px; @include opacity(0.5); background-position: center center; background-repeat: no-repeat; }
		&:hover, &.active {
			span { @include opacity(1); }
		}
	}

	$icons: "home", "lock", "unlock", "session", "download", "refresh", "alerts";

	@each $icon in $icons {
		.ico-#{$icon} {
			span { background-image: url($img + 'ico/16_' + $icon + '.png'); }
		}
	}

	.ico-home { float: left; border-right: 1px solid desaturate($color-primary-light, 50%); border-left: 0px; padding: 0px 20px 0px 0px; background-color: $nav-top-icon-home-background-color; height: 39px;
		span { width: 50px; }
		&:hover, &.active { background-color: darken($nav-top-icon-home-background-color, 5%); }
	}

	.ico-refresh { border-right: 1px solid #000; }

	.ico-alerts { width: 63px; height: 39px; display: block; padding: 0px; background-color: $nav-top-icon-alerts-background-color; border-left: 0px none;
		&.red { background: $color-danger;
			.count { background: darken($color-danger, 10%); }
		}
		&.green { background: $color-success;
			.count { background: darken($color-success, 10%); }
		}
		.count { @include border-radius(50%); background: #444; color: #fff; text-align: center; width: 22px; height: 22px; display: block; float: right; margin-top: 9px; line-height: 22px; margin-right: 5px; margin-left: -8px; }
	}

	.others-cover { float:right; position:relative;
		.show-link, .others { display:none; }
		.show-link { background: $color-primary-dark; border-left: 1px solid lighten($color-primary-dark, 10%); width: 30px; height: $nav-top-height; border-right: 1px solid desaturate($color-primary-light, 50%);
			span { text-align:center; background: url($img + 'ico/16_arrow_down.png') center center no-repeat; display:block; width: 30px; }
		}
		&.visible {
			.show-link { display:block; }
		}
		.others { position:absolute; right: 0px; top: $nav-top-height; min-width: 150px; @include background(rgba(darken($color-primary, 5%), 0.9)); @include single-box-shadow(0px, 0px, 8px, 0px, rgba(0,0,0,0.4));
			a { border-bottom: 1px solid #000; display:block; padding: 10px 20px; color: #fff; font-size: 1.25em; text-decoration:none; text-align:right; line-height: 1em;
				&:hover { background: $color-primary-dark; }
				span.arrow { display: none; }
			}
		}
	}


	#userpane { float: right; border-left: 1px solid #777; font-size: 1.2em;
		> a { color: $nav-top-icon-color; display: block; height: $nav-top-height; padding: 0px $content-padding-base 0px $content-padding-base + 16px + 5px; background-image: url($img + 'ico/16_users-o50.png'); background-position: 15px 45%; background-repeat: no-repeat; background-color: $nav-top-icon-background-color; background-color: rgba($nav-top-icon-background-color, 0.8);
			&:hover { color: lighten($nav-top-icon-color, 10%); background-color: darken($nav-top-icon-background-color, 10%); }
		}
	}

	.disconnect { border-left: 1px solid #777; height: 39px; background: $nav-top-icon-background-color; float: right; color: $nav-top-icon-color; text-decoration: underline;
		&:hover { text-decoration: none; color: lighten($nav-top-icon-color, 10%); background: #000; }
	}

	#alerts-icon { background: #000; float: right; color: #fff; height: 39px; border-left: 1px solid #777; }
}

nav#block--leftColumn { float: left; width: 10%; border-right: 1px solid $nav-left-border-color; background: $nav-left-background; @include single-box-shadow(0px, 0px, 10px, 0px, rgba(#000, 0.2), true); min-height: 100%; padding: $nav-top-height 0px 0px 0px; font-size: 1.3em; position: relative; margin-left: -1px; @include box-sizing(border-box);
	> div { clear: both; }
	h3 { padding: 0px $content-padding-base 10px $content-padding-base; font-weight:bold; font-size: 1.15em; border-bottom: 2px solid $nav-left-title-border-color; margin-bottom: 5px; margin-top: 25px;
		&:first-child { margin-top: $content-padding-base; }
	}
	h4 { margin-top: 25px; padding: 0px $content-padding-base 10px $content-padding-base; font-weight:bold; font-size: 1em; border-bottom: 1px solid $nav-left-border-color; margin-bottom: 5px; }
	h5 { margin: 15px 0px 5px 0px; font-weight: bold; font-size: 1em; }
	#history-and-profiles { height: 100%; min-height: 100%; max-width: 100%; position: relative; margin-top: 0px;
		#block--historyOfConnectedDevices, #block--profilesOfConnectedDevices { position: relative; height: 50%; width: 100%; min-height: 50%; margint-top: 0px; @include box-sizing(border-box); }
		#block--historyOfConnectedDevices { height: 50%; padding-top: $content-padding-base; }
		#block--profilesOfConnectedDevices { border-top: 1px solid $nav-left-title-border-color; padding-top: 5%; height: 50%; }
		h3 { margin-top: 0px; }
		a { position: relative; @include ellipsis(); padding-top: 7px; padding-bottom: 7px;
			&.active { margin-right:  0px; }
			.icon { width: 18px; height: 18px; padding: 0px; @include border-radius($border-radius-small); background: #fff; line-height: 18px; text-align: center; border: 1px solid #aaa; display: none; margin-top: -7px; margin-bottom: -4px; margin-right: -3px;
				&:hover { background-color: #bbb; border-color: #888; }
			}
			&:hover { padding-left: 3px;
				.icon { @include inline-block; }
			}
		}
	}
	.button { margin: 5px auto; clear: both; }
}
.nav-left {
	a { display: block; padding: 9px $content-padding-base; @include link-colors($nav-left-link-color, $nav-left-link-color-hover); text-decoration: none; background-color: $nav-left-link-background;
		&:hover { background: $nav-left-link-hover-background;  }
		&.active { background: $nav-left-link-active-background; color: $nav-left-link-color-active; padding: 9px $content-padding-base + 1px 8px $content-padding-base; border: 1px solid $nav-left-link-active-border; border-right: 0px none; }

		&.item { display: block; padding: 6px $content-padding-base; color: lighten($nav-left-link-color, 10%);
			.bullet { @include inline-block; width: 7px; height: 7px; margin-right: 8px; background: $nav-left-link-bullet-color; margin-top: -1px; }
		}
	}
}
.left-column-base { padding: 0px $content-padding-base; @include clearfix; }
form.filter-form {
	label { display: none; }
	select { width: 100%; min-height: 30px; }
	.note { font-size: 0.8em; font-style: italic; margin-top: 7px; }
}

/** TODO: refactor bellow **/
.scrollable-cover { overflow-y: scroll; }
section { float: left; width: 49.93%; min-height: 100%; padding: $content-padding-base; font-size: 1.4em; background: $section-background; @include box-sizing(border-box); border-top: $nav-top-height solid transparent;
	&.left-nav-defined { width: 44.93%; }
	&#block--state { border-right: 1px solid $section-border; @include single-box-shadow(-5px, 0px, 5px, 0px, darken($section-background, 5%), true); padding-right: 2 * $content-padding-base; }
	&#block--config { padding-left: 2 * $content-padding-base; }
	&#block--alerts { width: 20%; position: absolute; top: 0px; right: 0px; background: $alerts-background; border-left: 1px solid $alerts-border; @include box-shadow( 0px -7px 7px rgba($alerts-border,0.9)); padding-left: 0px; padding-right: 0px; margin-right: -20%;
		.message { border-bottom: 1px solid $alerts-border; padding: 10px 5%; color: $alerts-message-color; font-size: 0.9em; border-top: 1px solid $alerts-message-border; line-height: 1.4em;
			&:first-child { border-top: 0px none; }
			&:last-child { border-bottom: 0px none; }
			&::selection, &::-moz-selection { background: $color-primary; }
			&.popup { position: relative; background: $grey-darkest; }

			&.error {
				.circle { background: $color-danger; }
			}
			&.success {
				.circle { background: $color-success; }
			}
			&:hover { color: $alerts-message-color-hover;
				.close { display: block; }
				.circle { display: none; }
			}

			span { float: right; margin-left: 5px; }
			.close { display: none; cursor: pointer; }
			.circle { @include border-radius(50%); width: 10px; height: 10px; display: block; @include box-shadow(rgba(0,0,0,0.2) 0px 2px 4px); margin: 2px 0px 5px 0px; }
		}
	}

	&#block--singleContent { width: 100%; min-height: 100%; font-size: 1.4em; padding: $content-padding-base 2 * $content-padding-base $content-padding-base 2 * $content-padding-base;
		&.left-nav-defined { width: 89.91%; }
		&.max-width-column { max-width: 800px; width: 100%; float: none; }
	}

	#block--sourceValidation { float: left; margin: 29px 0px 0px 7px; font-size: 0.9em;
		.source-validation { margin-top: -6px; }
	}
}

section, #block--singleContent { position: relative; @include box-sizing(border-box);
	h1, h2, h3, h4, legend { font-family: $font-headings; color: $color-primary; }
	h1 { font-size: 1.9em; margin: 20px 0px 15px 0px; }
	h2 { font-size: 1.7em; margin: 15px 0px 10px 0px; }
	h3 { font-size: 1.5em; margin: 10px 0px 5px 0px; }
	h4 { font-size: 1.3em; margin: 5px 0px 5px 0px; }

	legend { font-size: 1.9em; margin-bottom: 15px; }
}
.alert { padding: 15px 20px; border: 1px solid $alert-border; background: $alert-background; @include border-radius($border-radius-base); clear: both; margin: 0px 0px 15px 0px;
	&.info { background-image: url($img + 'ico/info.png'); background-color: $alert-background; }
	&.success { background-image: url($img + 'ico/ok.png'); color: $color-success; }
	&.error { background-image: url($img + 'ico/error.png'); color: $color-danger; }
	
	&.info, &.success, &.error { padding-left: 40px; background-position: 10px 12px; background-repeat: no-repeat; }
}

article#block--singleContent { font-size: 1.4em; padding: $nav-top-height $content-padding-base;
	.alert { clear: both; margin-bottom: -30px; }
}

#block--notifications { width: 90%; background-color: $notifications-background; height: 10%; @include box-sizing(border-box); position: absolute; right: 0px; top: 100%; border-top: 1px solid $notifications-border; color: $notifications-color; font-size: 1.25em; font-family: $font-monospace; z-index: 20;
	.notif-cover { padding: 8px $content-padding-base; overflow-y: scroll; height: 100%; position: relative; @include box-sizing(border-box); }
	.notif-history-cover { @include box-sizing(border-box); margin: -8px 0px - $content-padding-base 8px 0px - $content-padding-base; background-color: $notifications-history-background; border-bottom: 1px solid $notifications-border; padding: 0px $content-padding-base;
		> .notif {
			&:first-child { margin-top: 8px; }
			&:last-child { margin-bottom: 8px; }
			.green, .red { color: $notifications-color-active; }
		}
	}
	.notif { margin-bottom: 2px; overflow: hidden; }
	.time { margin-top: 6px; color: $notifications-color-secondary; }
	strong { margin-right: 10px; width: 70px; float: left; }
	&.hidden { border: 0px none; height: 0px; padding: 0px; top: 100% !important; visibility: hidden; }

	.root-tag, .tagValue { margin-right: 10px; }
	.tagName { border-left: 1px solid $notifications-color-secondary; padding-left: 10px; color: $notifications-color-secondary; }
	a { color: $notifications-color-active; }
}

/* formulare */
form.form { margin: 15px 0px;
	&.login, &#login-form { border: 1px solid $form-login-border; background: $form-login-background; @include border-radius($border-radius-base); padding: 20px; @include single-box-shadow(0px, 0px, 8px, 0px, $form-login-border); }
	&.login { 
		label { width: 25%; padding-right: 2%; float: left; @include box-sizing(border-box); text-align: right; }
		input { 
			&[type="text"], &[type="password"] { width: 60%; float: left; }	
			&[type="submit"] { margin-left: 25%; }
		}
	}
	&#login-form { width: 400px; margin: 0px auto;
		.desc { font-size: 0.95em; margin-bottom: 25px; }

		> div { display: block; overflow: hidden; }

		label { width: 20%; margin-right: 5%; float: left;
			+ ul { float: left; margin-top: 20px; color: $color-danger; }
		}

		input { 
			&[type="text"], &[type="password"] { width: 70%; float: left; }	
			&[type="submit"] { margin-left: 25%; }
		}
		.login-alternative { border-left: 1px solid #666; @include inline-block; margin-left: 8px; padding-left: 8px; }
	}
	&.create-empty-module { width: 70%;
		label { width: 130px; }
	}

	label { @include inline-block; width: 90px; height: $form-input-height; line-height: $form-input-height; margin-top: 10px;
		&.required {
			&:after { content: " *"; }
		}
		&.percent-width { width: 15%; }
	}
	input { @include box-sizing(border-box);
		&[type="text"], &[type="password"], &[type="email"], &.text { @include box-sizing(border-box); width: $form-input-width; height: $form-input-height; line-height: $form-input-height; padding: $form-input-padding; border: 1px solid $form-input-border; background: $form-input-background; margin-top: 10px; @include inline-block; @include border-radius($form-input-radius); font-size: $form-input-font-size;
		}
		&[type="submit"] { @extend .button; }
		&[disabled="true"], &[disabled="disabled"] {
			&, &:hover { border-color: $grey-light; background-color: $grey-lighter; color: $grey-darker; cursor: not-allowed; }
		}
		&[type="radio"], &[type="checkbox"] { @include inline-block; margin-top: -2px; margin-right: 4px; }
		&.percent-width {
			&.w-50 { width: 50%; }
		}
	}
	textarea { @include box-sizing(border-box); @extend input[type="text"]; background: $form-input-background; height: 80px; line-height: 1.2em; font-size: $form-input-font-size; }
	select { @include box-sizing(border-box); width: $form-input-width; font-size: $form-input-font-size; }
}

article#block--singleContent #login-hp { padding: 100px 0px 0px 0px;
	.alert { margin-bottom: 0px; }
}


/** tables **/
table { width: 100%; margin: 15px 0px;
	th, td { border: 1px solid $table-border; padding: 8px 15px; }
	tr:nth-child(even) {
		th, td { background: $table-tr-background-even; }
	}
}

/** connections page **/
.configure .loading { background: url($img + "loading-bar.gif") repeat-x; display:block; height: 20px; line-height: 20px; color: #fff; padding: 0px 3%; width: 94%; border: 1px solid darken($color-primary, 10%); @include border-radius($border-radius-base); }

/** ip lookup **/
#ip-info-cover { width: 100%; @include clearfix; padding-bottom: 20px;
	> div { width: 47%; }
	#map-canvas { height: 250px; }
	p { padding: 5px 0px; }
}
.modal { overflow: scroll; font-size: 1.3em; }
.modal-body { font-family: $font-body; color: #333; }
.modal-content { @include clearfix; }
.modal-header { overflow: hidden;
	h3 { margin: 0px; padding: 0px; font-family: $font-headings; color: $color-primary; font-size: 1.5em; }
	.button { margin-top: 0px; margin-bottom: 0px; }
}
.modal-dialog { max-width: 70%; width: auto; margin: 5% auto; }


/** modal RPC methods **/
#block--modalWindow { display: none;
	> form { margin: 0px; }
	.modal-body { overflow-y: visible; }
	.modal-footer {
		input[type="submit"] { margin: 0px; }
	}
}

/* media queries */
@media screen and (max-width: 1280px) {
	nav#block--leftColumn { width: 14%; }
	body section {
		&.left-nav-defined { width: (100% - 14%)/2; }
		form[name=formCopyConfig] { margin-top: 0px; margin-bottom: 0px; }
		&#block--singleContent { 
			&.left-nav-defined { width: 86%; }
			form[name=formCopyConfig] { margin-top: 20px; }
		}
	}
	#block--notifications { width: 86%; }
}

@media screen and (max-width: 1550px) { }

